<template>
  <div>
    <BasicForm @register="registerForm" ref="formRef"/>
    <!-- 子表单区域 -->
    <a-tabs v-model:activeKey="activeKey" animated  @change="handleChangeTabs">
      <a-tab-pane tab="设计师" key="aDesigner" :forceRender="true">
        <JVxeTable
          keep-source
          resizable
          ref="aDesigner"
          v-if="aDesignerTable.show"
          :loading="aDesignerTable.loading"
          :columns="aDesignerTable.columns"
          :dataSource="aDesignerTable.dataSource"
          :height="340"
          :rowNumber="true"
          :rowSelection="true"
          :disabled="formDisabled"
          :toolbar="true"
        />
      </a-tab-pane>
      <a-tab-pane tab="优惠表" key="aDiscount" :forceRender="true">
        <JVxeTable
          keep-source
          resizable
          ref="aDiscount"
          v-if="aDiscountTable.show"
          :loading="aDiscountTable.loading"
          :columns="aDiscountTable.columns"
          :dataSource="aDiscountTable.dataSource"
          :height="340"
          :rowNumber="true"
          :rowSelection="true"
          :disabled="formDisabled"
          :toolbar="true"
        />
      </a-tab-pane>
    </a-tabs>

    <div style="width: 100%;text-align: center" v-if="!formDisabled">
      <a-button @click="handleSubmit" pre-icon="ant-design:check" type="primary">提 交</a-button>
    </div>
  </div>
</template>

<script lang="ts">

import {BasicForm, useForm} from '/@/components/Form/index';
import { computed, defineComponent, reactive, ref, unref } from 'vue';
import {defHttp} from '/@/utils/http/axios';
import { propTypes } from '/@/utils/propTypes';
import { useJvxeMethod } from '/@/hooks/system/useJvxeMethods';
import { VALIDATE_FAILED } from '/@/utils/common/vxeUtils';
import {getBpmFormSchema,designerColumns,discountColumns} from '../Company.data';
import {saveOrUpdate,designerList,discountList} from '../Company.api';

export default defineComponent({
  name: "CompanyForm",
  components:{
    BasicForm,
  },
  props:{
    formData: propTypes.object.def({}),
    formBpm: propTypes.bool.def(true),
  },
  setup(props){
    const [registerForm, { setFieldsValue, setProps }] = useForm({
      labelWidth: 150,
      schemas: getBpmFormSchema(props.formData),
      showActionButtonGroup: false,
      baseColProps: {span: 24}
    });

    const formDisabled = computed(()=>{
      if(props.formData.disabled === false){
        return false;
      }
      return true;
    });

    const refKeys = ref(['aDesigner', 'aDiscount', ]);
    const activeKey = ref('aDesigner');
    const aDesigner = ref();
    const aDiscount = ref();
    const tableRefs = {aDesigner, aDiscount, };
    const aDesignerTable = reactive({
      loading: false,
      dataSource: [],
      columns:aDesignerColumns,
      show: false
    })
    const aDiscountTable = reactive({
      loading: false,
      dataSource: [],
      columns:aDiscountColumns,
      show: false
    })

    const [handleChangeTabs,handleSubmit,requestSubTableData,formRef] = useJvxeMethod(requestAddOrEdit,classifyIntoFormData,tableRefs,activeKey,refKeys,validateSubForm);

    function classifyIntoFormData(allValues) {
      let main = Object.assign({}, allValues.formValue)
      return {
        ...main, // 展开
        aDesignerList: allValues.tablesValue[0].tableData,
        aDiscountList: allValues.tablesValue[1].tableData,
      }
    }

    //表单提交事件
    async function requestAddOrEdit(values) {
      await saveOrUpdate(values, true);
    }

    const queryByIdUrl = '/org.jeecg.shop/company/queryById';
    async function initFormData(){
      let params = {id: props.formData.dataId};
      const data = await defHttp.get({url: queryByIdUrl, params});
      //设置表单的值
      await setFieldsValue({...data});
      requestSubTableData(aDesignerList, {id: data.id}, aDesignerTable, ()=>{
        aDesignerTable.show = true;
      });
      requestSubTableData(aDiscountList, {id: data.id}, aDiscountTable, ()=>{
        aDiscountTable.show = true;
      });
      //默认是禁用
      await setProps({disabled: formDisabled.value})
    }

    initFormData();

    return {
      registerForm,
      formDisabled,
      formRef,
      handleSubmit,
      activeKey,
      handleChangeTabs,
      designer,
      discount,
      designerTable,
      discountTable,
    }
  }
});
</script>
